<!-- 消息组件 -->
<template>
  <view class="box">
    <view class="top m-t-20 flex-b p-10-20">
      <view class="flex-align-center">
        <view class="b-r-50 over-h" style="width: 80rpx;height: 80rpx;">
          <image style="width: 80rpx;" mode="widthFix" :src="info.headImg"></image>
        </view>
        <view class="f-s-12 m-l-20">
          <view class="m-b-10">{{info.name}}</view>
          <view class=" grey-deep-font-color">{{info.time}}</view>
        </view>
      </view>
      <view @click="changeConcern()" v-show="concern">
        <view v-if="info.Concern"
          class="btton grey-deep-bg-color font-color-white b-r-10 main-bg-color f-s-14 t-a-c l-h-60"
          hover-class="animate__animated animate__heartBeat"> <!-- //关注 -->
          <text class="iconfont icon-zhengque"></text>已关注
        </view>
        <view v-else class="btton font-color-white b-r-10 main-bg-color f-s-14 t-a-c l-h-60"
          hover-class="animate__animated animate__heartBeat"> <!-- //未关注 -->
          <text class="iconfont icon-zengjia m-r-10"></text>关注
        </view>
      </view>
    </view>
    <view class="center f-s-14 over-w">
      <text> {{info.content_text}}</text>
      <image mode="widthFix" :src="info.content_img" v-if="info.content_img"></image>
    </view>
    <view class="buttom flex-a m-t-50 m-b-40">
      <view hover-class="animate__animated animate__heartBeat" @click="changeLike">
        <text class="iconfont icon-dianzan2 f-s-20" v-if="flag_like"></text>
        <text class="iconfont icon-dianzan1 f-s-20 main-font-color" v-else></text>
        <text class="m-l-20" v-if="info.like">{{info.like}}</text>
        <text class="m-l-20" v-else>点赞</text>
      </view>
      <view hover-class="animate__animated animate__heartBeat" @click="changeUnlike">
        <text class="iconfont icon-cai f-s-20" v-if="flag_unlike"></text>
        <text class="iconfont icon-cai f-s-20 main-font-color" v-else></text>
        <text class="m-l-20" v-if="info.unLike">{{info.unLike}}</text>
        <text class="m-l-20" v-else>踩</text>
      </view>
      <view hover-class="animate__animated animate__heartBeat">
        <text class="iconfont icon-pinglun2 f-s-20"></text>
        <text class="m-l-20" v-if="info.message">{{info.message}}</text>
        <text class="m-l-20" v-else>评论</text>
      </view>
      <view hover-class="animate__animated animate__heartBeat">
        <text class="iconfont icon-zhuanfa1 f-s-20"></text>
        <text class="m-l-20"> 分享</text>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    name: "my-message",
    props: {
      info: {
        type: Object,
        default: {
          id: 0,
          headImg: "/static/logo.png", //头像
          name: "测试姓名", //昵称
          time: new Date(), //发布时间
          Concern: true, //是否关注
          content_text: '', //内容-文字
          content_img: '', //内容-图片
          like: 2, //点赞数量
          unLike: 0, //踩数量
          message: 3 //留言数量
        }
      },
      concern: {
        type: Boolean,
        default: true
      }
    },
    data() {
      return {
        flag_like: true,
        flag_unlike: true
      };
    },
    methods: {
      //关注或去管
      changeConcern() {
        this.$emit('changeConcern', this.info.id)
      },
      //点赞或取消点赞
      changeLike() {
        this.$emit('changeLike', {
          id: this.info.id,
          flag: this.flag_like
        })
        this.flag_like = !this.flag_like
      },
      changeUnlike() {
        this.$emit('changeUnlike', {
          id: this.info.id,
          flag: this.flag_unlike
        })
        this.flag_unlike = !this.flag_unlike
      }
    }
  }
</script>

<style lang="scss">
  .box {
    border-top: 14rpx solid #F5F5F5;

    .top {
      .btton {
        height: 60rpx;
        width: 140rpx;
      }
    }

    .center {
      width: 90%;
      padding: 20rpx 30rpx;
    }
  }
</style>